<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script  type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.js"></script>
    <script type="text/javascript">
     /* $(function(){

        }) */
        //让整个页面加载完成
        $(document).ready(function() {  //$(function(){})的全写
            /* ---------基本选择器练习--------- */
            //改变元素名为 <div> 的所有元素的背景色为 #FF69B4"  id="b1"
            $("#b1").click(function () {
                $("div").css("background-color","#FF69B4");
            })
            //改变 id 为 one 的元素的背景色为 #9ACD32"  id="b2"
            $("#b2").click(function(){
                $("#one").css("background-color","#9ACD32");
            });
            //改变 class 为 mini 的所有元素的背景色为 #FF0033"  id="b3"
            $("#b3").click(function () {
                $(".mini").css("background-color","#FF0033");
            })

            //改变所有元素的背景色为 #FDF5E6"  id="b4"
            $("#b4").click(function(){
                $("*").css("background-color","#FDF5E6");
            });

            //改变所有的<span>元素和 id 为 two 的元素的背景色为 #FF1493"  id="b5"
            $("#b5").click(function(){
                $("span,#two").css("background-color",
                    "#FF1493");
            });
            //改变所有的<span>元素和 id 为 two 的,id为one的，class为 mini的所有的元素的背景色为 #006400"  id="b6"
            $("#b6").click(function(){
                $("span,#two,#one,.mini").css("background-color",
                    "#006400");
            });
        });
    </script>

</head>
<style type="text/css">
    body{
        font-family: "微软雅黑"
    }
    div,span {
        width: 140px;
        height: 140px;
        margin: 20px;
        background: #9999CC;
        border: #000 1px solid;
        float: left;
        font-size: 17px;
        font-family: Roman;
    }

    div.mini {
        width: 40px;
        height: 43px;
        background: #CC66FF;
        border: #000 1px solid;
        font-size: 12px;
        font-family: Roman;
    }
    input{ margin: 5px 5px; }
</style>
<body>
<input type="button" value=" 改变元素名为 <div> 的所有元素的背景色为 #FF69B4" id="b1" />
<input type="button" value=" 改变 id 为 one 的元素的背景色为 #9ACD32" id="b2" />
<input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 #FF0033" id="b3" />
<input type="button" value=" 改变所有元素的背景色为 #FDF5E6" id="b4" />
<input type="button" value=" 改变所有的<span>元素和 id 为 two 的元素的背景色为 #FF1493"
       id="b5" />
<input type="button"
       value=" 改变所有的<span>元素和 id 为 two 的,id为one的，class为 mini的所有的元素的背景色为 #006400"
       id="b6" />


<h1>天气冷了</h1>
<h2>天气又冷了</h2>

<div id="one">id为one</div>

<div id="two" class="mini">
    id为two class是 mini
    <div class="mini"> class是 mini</div>
</div>

<div class="one">
    class是 one
    <div class="mini"> class是 mini</div>
    <div class="mini"> class是 mini</div>
</div>
<div class="one">
    class是 one
    <div class="mini01"> class是 mini01</div>
    <div class="mini"> class是 mini</div>
</div>

<br>
<div id="mover">动画</div>
<br>
<span class="spanone"> span </span>
<span class="mini"> span class是mini </span>
</body>
</html>